<template>
  <div class="pay-center">
    <div class="personal-info">
      <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
        <h2 class="title-style">缴费中心</h2>
        <div v-if="isLoading" class="loading-container">加载中...</div>
        <template v-else-if="chargeDetail && Object.keys(chargeDetail).length > 0">
          <table style="text-align: center; width: 99%; border-collapse: collapse;">
            <thead>
            <tr>
              <th style="width: 120px; height: 50px; border: 1px solid #eee;">房屋编号</th>
              <th style="width: 180px; height: 50px; border: 1px solid #eee;">缴费项目名称</th>
              <th style="width: 80px; height: 50px; border: 1px solid #eee;">用量</th>
              <th style="width: 80px; height: 50px; border: 1px solid #eee;">总金额</th>
              <th style="width: 120px; height: 50px; border: 1px solid #eee;">费用所属月份</th>
              <th style="width: 100px; height: 50px; border: 1px solid #eee;">缴费状态</th>
              <th style="width: 80px; height: 50px; border: 1px solid #eee;">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item, index) in chargeDetail" :key="index" style="border: 1px solid #eee;">
              <td style="width: 120px; height: 40px; border: 1px solid #eee;">
                <el-input v-model="item.houseName" disabled class="disabled-style"></el-input>
              </td>
              <td style="width: 180px; height: 40px; border: 1px solid #eee;">
                <el-input v-model="item.chargeName" disabled class="disabled-style"></el-input>
              </td>
              <td style="width: 80px; height: 40px; border: 1px solid #eee;">
                <el-input v-model="item.dosage" disabled class="disabled-style"></el-input>
              </td>
              <td style="width: 80px; height: 40px; border: 1px solid #eee;">
                <el-input v-model="item.amount" disabled class="disabled-style"></el-input>
              </td>
              <td style="width: 120px; height: 40px; border: 1px solid #eee;">
                <el-input v-model="item.month" disabled class="disabled-style"></el-input>
              </td>
              <td style="width: 100px; height: 40px; border: 1px solid #eee;">
                <el-input v-model="item.status" disabled class="disabled-style"></el-input>
              </td>
              <td style="width: 80px; height: 40px; border: 1px solid #eee;">
                <el-button type="danger" @click="pay(item.id)" :disabled="item.status === 1">缴费</el-button>
              </td>
            </tr>
            </tbody>
          </table>
        </template>
        <template v-else>
          <p>暂无未缴费详情</p>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';

const count = ref(0);
const load = () => {
  count.value += 2;
};

export default {
  name: "ChargeCenter",
  data() {
    return {
      chargeDetail: [],
      formatDate: function (date) {
        return new Date(date).toLocaleDateString();
      },
      dialogVisible: false,
      chargeItemDetails: {},
      token: localStorage.getItem('token') || '',
      isLoading: false
    };
  },
  mounted() {
    this.getChargeDetails();
  },
  methods: {
    async getChargeDetails() {
      this.isLoading = true;
      try {
        const response = await axios.get('/api/charge-details/personal', {
          headers: {
            Authorization: this.token
          }
        });
        const chargeData = response.data.data;
        chargeData.forEach(item => {
          item.paymentStatusText = item.paymentStatus === 0? '未缴费' : '已缴费';
        });
        // 对获取到的数据进行排序处理
        this.chargeDetail = chargeData.sort((a, b) => {
          // 未缴费的在前
          if (a.paymentStatus === 0 && b.paymentStatus === 1) {
            return -1;
          }
          if (a.paymentStatus === 1 && b.paymentStatus === 0) {
            return 1;
          }
          return b.feeMonth - a.feeMonth;
        });
        console.log('获取的数据', this.chargeDetail);
      } catch (error) {
        ElMessage.error('获取缴费详情失败:' + error.message);
        console.error('获取缴费详情失败:', error);
      } finally {
        this.isLoading = false;
      }
    },
    async pay(id) {
      console.log(id);
      try {
        const response = await axios.get('/api/alipay/pay', {
          params: {
            chargeDetailId: id
          }
        });
        console.log('pay', response);
        // 创建一个 div 元素来容纳表单
        const formDiv = document.createElement('div');
        formDiv.innerHTML = response.data;
        // 将表单添加到页面中
        document.body.appendChild(formDiv);
        // 获取表单元素并提交
        const form = formDiv.querySelector('form');
        if (form) {
          form.submit();
        } else {
          console.error('没有找到表单元素');
        }
      } catch (error) {
        ElMessage.error('支付失败:' + error.message);
      }
    },
    // 新增方法，用于在页面加载时重新获取缴费详情
    refreshChargeDetails() {
      this.getChargeDetails();
    }
  },
  // 在组件挂载后监听路由变化，当返回缴费界面时刷新数据
  watch: {
    $route: {
      immediate: true,
      handler() {
        this.refreshChargeDetails();
      }
    }
  }
};
</script>

<style scoped>
.title-style {
  margin-bottom: 20px;
  color: #136bbd;
}

.pay-center {
  padding: 15px;
  display: flex;
  width: 100%;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中，可按需选择是否添加 */
}

.personal-info {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
  width: 80%;
  height: 80%;
  background-color: #ffffff; /* 将背景颜色设置为白色 */
}

table {
  width: 80%; /* 调整表格宽度，使其更合适 */
  margin: 0 auto; /* 让表格在父元素中水平居中 */
  border-collapse: collapse;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

table td {
  padding: 12px;
}

.infinite-list {
  height: 440px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list.infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}

.infinite-list.infinite-list-item + .list-item {
  margin-top: 10px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 16px;
  color: #666;
}
</style>